<template>
    <div>
        <van-field v-model="info.name" clearable label="用户名" placeholder="请输入用户名"/>
        <van-field v-model="info.pwd" type="password" label="密码" placeholder="请输入密码" clearable/>
        <div class="btn-box">
            <van-button class="btn" size="large" @click.native="submit">登录</van-button>
        </div>
        <div class="flex-row handle-btns plr15">
            <span @click="$router.push({name:'find-password'})">忘记密码</span>
            <span @click="$router.push({name:'register'})">注册</span>
        </div>
    </div>
</template>

<script>
    import md5 from "js-md5"

    export default {
        data() {
            return {
                info: {
                    name: '',
                    pwd: '',
                }
            }
        },
        methods: {
            submit() {
                if (this.info.name == '') return this.fail('用户名不能为空')
                if (this.info.pwd == '') return this.fail('密码不能为空')
                if (this.info.pwd.length < 6 && this.info.pwd.length > 18) return this.fail('请输入6-18位密码')
                this.$store.dispatch(types.USER_LOGIN, {
                    name: this.info.name,
                    pwd: md5(this.info.pwd)
                }).then(res => {
                    if (res.code !== 0) return this.fail(res.msg)
                    this.success('登录成功')
                    this.$router.go(-1)
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .handle-btns {
        justify-content: flex-end;
        height: 30px;
        span {
            color: #666;
            &:first-child {
                padding-right: 10px;
            }
        }
    }

    .verify {
        position: relative;
        height: 44px;
        padding: 10px 15px;
        background: #fff;
        span {
            display: inline-flex;
            width: 2.4rem;
        }
        input {
            height: 100%;
            width: 50%;
        }
        .v-code {
            position: absolute;
            top: 50%;
            right: 15px;
            transform: translate(0, -50%);
        }
        input::-webkit-input-placeholder {
            color: #969799;
        }
    }
</style>
